<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理已选课程</title>
    <script src="js/base.js"></script>
    <style>
        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        /* 左侧导航栏样式 */
        .sidebar {
            width: 220px;
            background-color: #2c3e50;
            color: white;
            height: 100%;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 10;
        }

        .sidebar-header {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 1.5rem;
        }

        .nav-links {
            margin-top: 20px;
        }

        .nav-links a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            transition: all 0.3s ease;
        }

        .nav-links a:hover {
            background-color: #34495e;
            padding-left: 25px;
        }

        .nav-links a.active {
            background-color: #3498db;
            border-left: 4px solid #2980b9;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            height: 100%;
        }

        .page-title {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
            font-size: 1.8rem;
        }

        .page-title span {
            color: #3498db;
            font-weight: bold;
        }

        /* 表格样式 */
        .course-table {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .course-table th,
        .course-table td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        .course-table th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }

        .course-table tr:hover {
            background-color: #f9f9f9;
        }

        /* 操作链接样式 */
        .action-link {
            color: #e74c3c;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .action-link:hover {
            color: #c0392b;
            text-decoration: underline;
        }

        /* 分页按钮样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

        .pagination-btn {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .pagination-btn:hover {
            background-color: #2980b9;
        }

        .pagination-btn:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <h2>学生选课系统</h2>
    </div>
    <div class="nav-links">
        <a href="studentIndex.html">课程列表</a>
        <a href="studentManagerCourse.html" class="active">已选课程管理</a>
        <a href="signIn.html">退出登录</a>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <h1 class="page-title"><span id="sname"></span>已选的课程</h1>
    <script>
            // 显示当前登录学生姓名
            document.getElementById("sname").innerHTML = localStorage.getItem("sname") || "学生";
        </script>

    <!-- 已选课程表格 -->
    <table class="course-table" id="courseData">
        <tr>
            <td>课程号</td>
            <td>课程名称</td>
            <td>授课教师</td>
            <td>教室容量</td>
            <td>当前选课人数</td>
            <td colspan="3">操作</td>
        </tr>
    </table>

    <!-- 分页按钮区域 -->
    <div class="pagination" id="buttons"></div>

    <script>
            // 全局变量
            let studentId = localStorage.getItem("sid");
            let pageNo = 1;
            let pageSize = 5;
            let pageCount = 0;
            let courseData = null;

            /**
             * 加载已选课程数据
             */
            function loadData() {
                const url = `http://localhost:8080/student/page?pageNo=${pageNo}&pageSize=${pageSize}&studentId=${studentId}&state=1`;

                $.rest(url, "get", null, function (response) {
                    if (response.code === 200) {
                        courseData = response.data.data;
                        pageCount = response.data.pageCount;
                        renderTable();
                        renderPagination();
                    } else {
                        alert("加载数据失败: " + (response.msg || "未知错误"));
                    }
                });
            }

            /**
             * 渲染课程表格
             */
            function renderTable() {
                let tableHtml = `
                    <tr>
                        <td>课程号</td>
                        <td>课程名称</td>
                        <td>授课教师</td>
                        <td>教室容量</td>
                        <td>当前选课人数</td>
                        <td colspan="3">操作</td>
                    </tr>
                `;

                if (courseData && courseData.length > 0) {
                    courseData.forEach((course, index) => {
                        tableHtml += `
                            <tr>
                                <td>${course.id}</td>
                                <td>${course.name}</td>
                                <td>${course.tname}</td>
                                <td>${course.maxLimit}</td>
                                <td>${course.count}</td>
                                <td colspan='3'>
                                    <a href='#' class="action-link" onclick='return onUnSelectClick(${index})'>不选这门课了</a>
                                </td>
                            </tr>
                        `;
                    });
                } else {
                    tableHtml += `
                        <tr>
                            <td colspan="8" style="padding: 20px;">暂无已选课程</td>
                        </tr>
                    `;
                }

                document.getElementById("courseData").innerHTML = tableHtml;
            }

            /**
             * 渲染分页按钮
             */
            function renderPagination() {
                let paginationHtml = "";

                if (pageCount > 0) {
                    // 上一页按钮
                    paginationHtml += `<button class="pagination-btn" onclick="onPrevClick()" ${pageNo === 1 ? 'disabled' : ''}>上一页</button>`;

                    // 页码按钮
                    for (let i = 1; i <= pageCount; i++) {
                        paginationHtml += `<button class="pagination-btn" onclick="onPageClick(${i})" ${pageNo === i ? 'style="background-color: #2980b9;"' : ''}>${i}</button>`;
                    }

                    // 下一页按钮
                    paginationHtml += `<button class="pagination-btn" onclick="onNextClick()" ${pageNo === pageCount ? 'disabled' : ''}>下一页</button>`;
                }

                document.getElementById("buttons").innerHTML = paginationHtml;
            }

            /**
             * 页码点击事件
             */
            function onPageClick(pNo) {
                if (pNo !== pageNo) {
                    pageNo = pNo;
                    loadData();
                }
            }

            /**
             * 上一页点击事件
             */
            function onPrevClick() {
                if (pageNo > 1) {
                    pageNo--;
                    loadData();
                }
            }

            /**
             * 下一页点击事件
             */
            function onNextClick() {
                if (pageNo < pageCount) {
                    pageNo++;
                    loadData();
                }
            }

            /**
             * 取消选课事件
             */
            function onUnSelectClick(index) {
                if (courseData && courseData[index]) {
                    const course = courseData[index];
                    const confirmCancel = confirm(`确定要取消选择《${course.name}》吗？`);

                    if (confirmCancel) {
                        const url = `http://localhost:8080/student/editCourseState?studentId=${studentId}&courseId=${course.id}&state=0`;

                        $.rest(url, "get", null, function (response) {
                            if (response.code === 200) {
                                alert("取消选课成功");
                                loadData(); // 重新加载数据
                            } else {
                                alert("取消选课失败: " + (response.msg || "未知错误"));
                            }
                        });
                    }
                }
                return false;
            }

            // 页面加载时初始化数据
            loadData();
        </script>
</div>
</body>
</html>
